<template>
    <div class="bottom-bar">
        <div class="item-box">
            <div v-for="(item,index) in barData" :key="index" :class="['bar-item',index === 0 ? 'item-active' : '']">
                <img class="bar-img" :src="item.img" alt="">
                <p class="bar-text">{{item.text}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "bottomBar",
        data() {
            return {
                barData: [
                    {
                        img: require('@/assets/img/bar1.png'),
                        text: '首页',
                    },
                    {
                        img: require('@/assets/img/bar2.png'),
                        text: '房源',
                    },
                    {
                        img: require('@/assets/img/bar3.png'),
                        text: '消息',
                    },
                    {
                        img: require('@/assets/img/bar4.png'),
                        text: '我的',
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    p{
        margin: 0;
    }
    .bottom-bar {
        position: fixed;
        width: 100%;
        height: 0.5rem;
        bottom: 0;
        left: 0;
        border-top: 0.01rem solid #eeeeee;
        z-index: 99;
        background: #fff;
    }

    .item-box {
        width: 100%;
        height: .5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .05rem;
        box-sizing: border-box;
    }

    .bar-item {
        width: 25%;
        height: 100%;
        font-size: .1rem;
        color: #000;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .item-active>.bar-text{
        color: #177EF5;
    }
    .bar-img{
        height: .22rem;
    }
</style>
